html{  
    height: 100%;  
    margin: 0;  
}  

body{  
    font-family: Arial, Helvetica,sans-serif;  
    text-align: center;  
    margin: 0;  
    padding: 0;  
    width: 100%;  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
}  

/* Website Title */  
.container{  
    padding: 30px;  
    position: relative;  
    background: linear-gradient(45deg, #443B96, #F60B68, #F4483A);  
    background-size: 500% 500%;  
    animation: change-gradient 10s ease-in-out infinite;  
}  
@keyframes change-gradient {  
    0%{  
        background-position: 0 50%;  
    }  
    50%{  
        background-position: 100% 50%;  
    }  
    100%{  
        background-position: 0 50%;  
    }  
}  

.container-heading{  
    margin: 0;  
}  

.heading_font{  
    color: #ffffff;  
    font-family: 'Pacifico', cursive;  
    font-size: 35px;  
    font-weight: normal;  
}  

.description p{  
    color: #ffffff;  
    font-style: italic;  
    font-size: 14px;  
    margin: -5px 0 0;  
}  

/* Text Area */  
.ml-container{  
    margin: 30px 0;  
    flex: 1 0 auto;  
}  

.form-input {  
    text-align: center;  
    width: 350px;  
    height: 25px;  
    margin-bottom: 5px;  
}  

/* Predict Button */  
.my-cta-button{  
    background: #f9f9f9;  
    border: 2px solid #000000;  
    border-radius: 1000px;  
    box-shadow: 3px 3px #8c8c8c;  
    margin-top: 10px;  
    padding: 10px 36px;  
    color: #000000;  
    display: inline-block;  
    font: italic bold 20px/1 "Calibri", sans-serif;  
    text-align: center;  
}  

.my-cta-button:hover{  
    color: #4d089a;  
    border: 2px solid #4d089a;  
}  

.my-cta-button:active{  
    box-shadow: 0 0;  
}  

/* Contact */  
.contact-icon{  
    color: #ffffff;  
    padding: 7px;  
}  

.contact-icon:hover{  
    color: #8c8c8c;  
}  

/* Footer */  
.footer{  
    flex-shrink: 0;  
    position: relative;  
    padding: 20px;  
    background: linear-gradient(45deg, #443B96, #F60B68, #F4483A);  
    background-size: 500% 500%;  
    animation: change-gradient 10s ease-in-out infinite;  
}  

.footer-description{  
    color: #ffffff;  
    margin: 0;  
    font-size: 12px;  
}  

/* Result */  
.results{  
    padding: 30px 0 0;  
    flex: 1 0 auto;  
}  

.danger{  
    color: #ff0000;  
}  

.safe{  
    color: green;  
}  

.gif{  
    width: 25%;  
}  

.gif1{  
    width: 35%;  
    margin: 10px 0;  
}  

/* History Records */  
.ml-container {  
    max-width: 1200px;  
    margin: 0 auto; 
    padding: 20px; 
}  

table {  
    width: 100%;  
    border-collapse: collapse;  
    font-size: 14px;  
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  
    margin: 20px 0; 
    border-radius: 8px;  
    overflow: hidden; 
}  

th, td {  
    padding: 15px; 
    text-align: left;  
    border-bottom: 1px solid #ddd;  
}  

th {  
    background-color: #007BFF; 
    color: white;   
    font-weight: bold;  
}  

tr:hover {  
    background-color: #f1f1f1;   
}  

td {  
    background-color: #ffffff;  
}  
 
tr:nth-child(even) td {  
    background-color: #f9f9f9;  
}  

tfoot {  
    font-weight: bold; 
}
 
.chart-container {  
    display: flex;  
    justify-content: space-around;  
    flex-wrap: wrap;   
    margin: 30px 0;  
}  


.chart {  
    max-width: 600px; 
    width: 100%;  
    height: 400px;  
    margin: 80px;   
}  

.boxplot-container {  
    display: flex;   
    justify-content: space-between;   
    align-items: center;   
    padding: 20px;    
}  

.boxplot-chart {  
    flex: 1;  
    margin: 0 10px;  
    text-align: center;   
}

.boxplot-container {  
    display: flex;    
    justify-content: center;  
    align-items: center;  
    flex-direction: column;  
    margin: 20px 0;    
    padding: 0; 
}  


.boxplot-chart {  
    width: 80%;    
    max-width: 1000px;    
    height: auto;   
    margin: 20px auto;  
    position: relative;  
}  